<template>
  <div>
    <div class="ss__tab__portlet">
      <div class="title">
        <div class="tab">
          <div class="ss_tabs">
            <div class="ss__tabs__item" :class=" tabActive == item.name ? 'ss_tabs__active':'' "
                 @click="clickTab(item,i)" v-for="(item,i) in portletTab" ref="iconBox">{{ item.label }}
            </div>
          </div>
        </div>
        <div class="action">
          <slot name="action"></slot>
        </div>
      </div>
      <div>
        <slot name="search"></slot>
      </div>
      <div class="body">
        <slot name="body">
        </slot>
      </div>
    </div>
    <div class="footer">
      <slot name="footer"></slot>
    </div>
  </div>

</template>

<script>
export default {
  props: ['clickTabCallback', 'portletTab', 'tabActive'],
  name: 'Portlet',
  data() {
    return {}
  },
  mounted() {
  },
  methods: {
    clickTab(item, i) {
      this.tabActive = item.name
      this.clickTabCallback(item)
    },
  }
}
</script>

<style lang="less" scoped>

</style>
